<template>
  <!-- <button @click="increment">
    Count is: {{ state.count }}, double is: {{ state.double }}
  </button> -->
  <button>
    Count is: {{ x }}, double is: {{ y }}
  </button>
</template>

<script lang="ts">

import { ref,reactive, computed,watchEffect  } from 'vue';


import { useMousePosition  } from '@/utils/mouse';
// ref 传入一个变量
// reactive 传入一个对象
export default ({
  name: 'test',
  
  setup(){
    const {x,y}=useMousePosition()
    console.log(x)
    // return{x,y}

    return{
      ...useMousePosition()
    }
    // const state:any=reactive({
    //   count:0,
    //   double:computed(()=>state.count*2)
    // })
    
    // function increment(){
    //   state.count++
    // }

    // let  stt=ref("srrrrr")
    // watchEffect(() => {
    //   console.log(" stt:"+stt.value)
    // })

    // stt.value="qqqqq"
    // state.count++
    // return{
    //   state,
    //   increment
    // }

  }
});
</script>

